<template>
  <div id="life">
    <header-page title="Vue生命周期"/>
    <div @click="change">{{content}}</div>
    <div @click="change">{{computedP}}</div>
    <h2>beforeCreate</h2>
    <ul>
      <li>methods: undefined</li>
      <li>data: undefined</li>
      <li>el: null</li>
    </ul>
    <h2>created</h2>
    <ul>
      <li>methods: 可以获取</li>
      <li>data: 可以获取</li>
      <li>el: null</li>
    </ul>
    <h2>beforeMount</h2>
    <ul>
      <li>methods: 可以获取</li>
      <li>data: 可以获取</li>
      <li>el: null</li>
    </ul>
    <h2>mounted</h2>
    <ul>
      <li>methods: 可以获取</li>
      <li>data: 可以获取</li>
      <li>el: 可以获取</li>
    </ul>
    <h2>beforeDestroy</h2>
    <ul>
      <li>methods: 可以获取</li>
      <li>data: 可以获取</li>
      <li>el: 可以获取</li>
    </ul>
    <h2>destroyed</h2>
    <ul>
      <li>methods: 可以获取</li>
      <li>data: 可以获取</li>
      <li>el: 可以获取</li>
    </ul>
    <h2>beforeUpdate</h2>
    <ul>
      <li>methods: 可以获取</li>
      <li>data: 可以获取且此时data已更新</li>
      <li>el: 可以获取且此时el中的数据未改变</li>
    </ul>
    <h2>updated</h2>
    <ul>
      <li>methods: 可以获取</li>
      <li>data: 可以获取且已更新</li>
      <li>el: 可以获取且已更新</li>
    </ul>
  </div>
</template>

<script>
import HeaderPage from './../../components/common/header';

export default {
  components: {
    HeaderPage,
  },
  data() {
    return {
      content: 'div',
    };
  },
  computed: {
    computedP() {
      console.log('==============computed============');
      return `${this.content}-computed`;
    },
  },
  methods: {
    change() {
      this.content = '内容已更换';
    },
    showData() {
      console.log('el', document.querySelector('#life'));
    },
  },
  beforeCreate() {
    console.log('beCreate-this', this);
    console.log('beCreate-data', this.computedP);
    console.log('beCreate-showdata', this.showData);
    console.log('beCreate-el', document.querySelector('#life'));
    // this.showData();
  },
  created() {
    console.log('============');
    console.log('created-this', this);
    console.log('created-data', this.computedP);
    console.log('created-showdata', this.showData);
    console.log('created-el', document.querySelector('#life'));
    this.showData();
  },
  beforeMount() {
    console.log('============');
    console.log('beMounte-this', this);
    console.log('beMounte-data', this.computedP);
    console.log('beMounte-showdata', this.showData);
    console.log('beMounte-el', document.querySelector('#life'));
    this.showData();
  },
  mounted() {
    console.log('============');
    console.log('mounted-this', this);
    console.log('mounted-data', this.computedP);
    console.log('mounted-showdata', this.showData);
    console.log('mounted-el', document.querySelector('#life'));
    this.showData();
  },
  beforeUpdate() {
    console.log('============');
    console.log('beforeUpdate-this', this);
    console.log('beforeUpdate-data', this.computedP);
    console.log('beforeUpdate-showdata', this.showData);
    console.log('beforeUpdate-el', document.querySelector('#life'));
    this.showData();
  },
  updated() {
    console.log('============');
    console.log('updated-this', this);
    console.log('updated-data', this.computedP);
    console.log('updated-showdata', this.showData);
    console.log('updated-el', document.querySelector('#life'));
    this.showData();
  },
  beforeDestroy() {
    console.log('============');
    console.log('beforeDestroy-this', this);
    console.log('beforeDestroy-data', this.computedP);
    console.log('mountbeforeDestroyed-showdata', this.showData);
    console.log('beforeDestroy-el', document.querySelector('#life'));
    this.showData();
  },
  destroyed() {
    console.log('============');
    console.log('destroyed-this', this);
    console.log('destroyed-data', this.computedP);
    console.log('destroyed-showdata', this.showData);
    console.log('destroyed-el', document.querySelector('#life'));
    this.showData();
  },

};
</script>

<style lang="less" scoped>
#life{
  h2{
    font-size: .5rem;
    border-top: 1px solid #ececec;
  }
  ul{
    margin: .1rem .5rem;
  }
}
</style>
